<template>
	<view>
		<!-- 导航栏 -->
		<view class="nav-bar">
<!-- 			<text class="nav-title">设置中心</text -->
		</view>

		<!-- 设置中心容器 -->
		<view class="settings-container">
			<!-- 用户信息区域 -->
			<view class="user-info">
				<view class="avatar-section" @tap="updateAvatar" style="display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd;">
					<text class="label">头像</text>
					<view class="avatar-right" style="display: flex; align-items: center;">
						<image class="avatar"  :src="user_pic" mode="aspectFill" style="width: 60rpx; height: 60rpx; border-radius: 50%;" v-if="user_pic" ></image>
						<image class="avatar" src="/static/logo.png" mode="aspectFill" style="width: 60rpx; height: 60rpx; border-radius: 50%;" v-else ></image>
						
						<text class="iconfont icon-arrow-right"></text>
					</view>
				</view>
				
				<view class="info-item" style="border-bottom: 1px solid #ddd;">
					<text class="label">用户名</text>
					<input type="text" v-model="username" placeholder="请输入用户名" />
					<text class="iconfont icon-arrow-right"></text>
				</view>
				
				<view class="info-item" style="border-bottom: 1px solid #ddd;">
					<text class="label">手机号</text>
					<input type="number" v-model="phoneNum" placeholder="请输入手机号" maxlength="11"/>
					<text class="iconfont icon-arrow-right"></text>
				</view>
			</view>
			
			<!-- 功能设置区 -->
			<view class="function-section">
				<navigator url="/pages/address/address" class="function-item" style="border-bottom: 1px solid #ddd; display: flex; align-items: center;">
					<view style="display: flex; align-items: center;">
						<text class="iconfont icon-ditu" style="margin-right: 10rpx;"></text>
						<text class="label">我的地址</text>
					</view>
				</navigator>
				
				<navigator url="/pages/updatedPassword/updatedPassword" class="function-item" style="border-bottom: 1px solid #ddd; display: flex; align-items: center;">
					<view style="display: flex; align-items: center;">
						<text class="iconfont icon-mti-shoukao" style="margin-right: 10rpx;"></text>
						<text class="label">修改密码</text>
					</view>
				</navigator>
			</view>
		</view>

		<!-- 保存按钮 -->
		<view class="btn-section" style="margin-top: 20rpx; display: flex; justify-content: center;">
			<button class="save-btn" @tap="changeInfo">保存修改</button>
		</view>
	</view>
</template>

<script>
	import {updateuser} from "../../api/index.js"
	export default {
		data() {
			return {
				username:'',
				phoneNum:'',
				user_pic:'',
				userId:''
			}
		},
		created() {
			// 进入页面 先到本地存储中获取一次用户名 手机号 头像
			const user = uni.getStorageSync('userInfo')
			this.username = user.nick_name,
			this.phoneNum = user.phoneNum,
			this.user_pic = user.user_pic,
			this.userId = user.id
		},
		methods: {
			
			// 保存修改
			changeInfo(){
				updateuser({id:this.userId,nick_name:this.username,user_pic:this.user_pic,phoneNum:this.phoneNum})
				.then(res=>{
					if(res.data.status === 0 ){
						// 保存修改成功后提示修改成功
						uni.showToast({
							title:"修改成功"
						})
						let info = uni.getStorageSync("userInfo")
						// 保存最新数据到本地
						let userInfo = {...info,nick_name:this.username,user_pic:this.user_pic,phone:this.phoneNum}
						uni.setStorageSync("userInfo",userInfo)
					}
					console.log(res,111);
				})
			},
			// 修改头像
			updateAvatar(){
				// 选择图片
				uni.chooseMessageFile({
					count:1,
					type:"image",
					success:(res=>{
						console.log(res,"选择");
						let imageUrl = res.tempFiles[0].path
						console.log(imageUrl);
						// 上传图片临时地址到服务器
						uni.uploadFile({
							url:"http://8.140.198.52:8001/common/uploadFile",
							filePath:imageUrl,
							name:"file",
							header:{
								"Authorization":uni.getStorageSync("token"),
								'content-type': 'multipart/form-data',
							},
							success:(res)=>{
								console.log(res,"图片在服务器上的地址");
								this.user_pic = res.data
								
							}
						})
					})
				})
			}
		},
	}
</script>

<style>
.page {
	background: linear-gradient(#b2cfed, #ffff);
	width: 100%;
	height: 100vh;
}

.info-section {
	padding: 30rpx;
	margin-top: 20rpx;
}

.avatar-section{
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.8);
	padding: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}
.info-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.8);
	padding: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.label {
	font-size: 28rpx;
	color: #333;
}

.phone-text {
	font-size: 28rpx;
	color: #666;
}

input {
	flex: 1;
	height: 60rpx;
	font-size: 28rpx;
	text-align: right;
	margin-right: 20rpx;
}

.function-section {
	padding: 30rpx;
	margin-top: 20rpx;
}

.function-item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	background: rgba(255, 255, 255, 0.8);
	padding: 20rpx;
	margin-bottom: 20rpx;
	border-radius: 12rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
}

.btn-section {
	padding: 30rpx;
	position: fixed;
	bottom: 0;
	width: 100%;
	box-sizing: border-box;
}

.save-btn {
	width: 100%;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	background: #4a90e2;
	color: #fff;
	border-radius: 40rpx;
	font-size: 32rpx;
}


</style>
